<!--
 * @轮子的作者: 轮子哥
 * @Date: 2024-11-26 08:39:57
 * @LastEditTime: 2024-11-28 08:38:09
-->
<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-space>
			<el-space>
				<el-button icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-space>
			<el-space>
				<el-button plain icon="Download" @click="downloadHandle('/kyy/game/export')">导出</el-button>
			</el-space>
			<el-space>
				<el-button icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>
			</el-space>
		</el-space>
		<el-table
			v-loading="state.dataListLoading"
			:data="state.dataList"
			border
			class="layout-table"
			show-overflow-tooltip
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="appid" label="小游戏id" header-align="center" align="center"></el-table-column>
			<el-table-column prop="appname" label="小游戏名字" header-align="center" align="center"></el-table-column>
			<el-table-column prop="briefIntro" label="游戏简介" header-align="center" align="center"></el-table-column>
			<el-table-column label="游戏logo" header-align="center" align="center">
				<template #default="scope">
					<el-image style="width: 60px; height: 60px" hide-on-click-modal :src="scope.row.logo" :z-index="999" fit="cover" />
				</template>
			</el-table-column>
			<el-table-column prop="category2Id" label="二级分类id" header-align="center" align="center"></el-table-column>
			<el-table-column prop="category2Name" label="二级分类名字" header-align="center" align="center"></el-table-column>
			<el-table-column prop="category3Id" label="三级分类id" header-align="center" align="center"></el-table-column>
			<el-table-column prop="category3Name" label="三级分名字" header-align="center" align="center"></el-table-column>
			<el-table-column prop="userName" label="小游戏原始id" header-align="center" align="center"></el-table-column>
			<el-table-column label="游戏封面" header-align="center" align="center">
				<template #default="scope">
					<el-image style="width: 60px; height: 60px" hide-on-click-modal :src="scope.row.banner" :z-index="999" fit="cover" />
				</template>
			</el-table-column>

			<el-table-column prop="videoInfo" label="宣传视频对象" header-align="center" align="center"></el-table-column>
			<el-table-column prop="publicityImg" label="图片列表" header-align="center" align="center"></el-table-column>
			<el-table-column label="方形icon" header-align="center" align="center">
				<template #default="scope">
					<el-image style="width: 60px; height: 60px" hide-on-click-modal :src="scope.row.logoSquare" :z-index="999" fit="cover" />
				</template>
			</el-table-column>
			<el-table-column label="cps分成比例" header-align="center" align="center">
				<template #default="scope">
					<el-button type="primary" link>{{ JSON.parse(scope.row.cpsPercent).new_user_cps_percent }}</el-button>
					<el-button type="primary" link>{{ JSON.parse(scope.row.cpsPercent).returning_user_cps_percent }}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="isPcUnavailable" label="是否pc不可用" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" v-model:visible="addOrUpdateVisible" @refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="KyyGameIndex">
import { useCrud } from '@/hooks'
import { reactive, nextTick, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/kyy/game/page',
	deleteUrl: '/kyy/game',
	queryForm: {}
})

const queryRef = ref()
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateVisible.value = true
	nextTick(() => addOrUpdateRef.value.init(id))
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, downloadHandle, reset } = useCrud(state)
</script>
